User Interface : Detecting Changes in the Theme Template

1. Problem

You need to detect when the user changes the Windows Phone 7 theme from Dark to Light or vice versa so you can change icons, buttons, and background colors accordingly.

2. Solution

You can use the ResourceDictionary class provided by the Resources property from the Application class.

3. How It Works

The Application class has a static property called Resources that returns a ResourceDictionary object filled with Windows Phone resources representing, for example, the chosen fonts, the background color, the foreground color, and so on.

In this recipe, you will use the PhoneBackgroundBrush resource to retrieve the chosen background theme color. If the theme is set to Dark, this value will be equal to the black color (Red Green Blue values set to 0). Otherwise, it will be set to the white color (Red Green Blue values set to 255) for the Light theme.

4. The Code

To demonstrate this recipe, you will create the DetectingThemeChanging Silverlight for Windows Phone application. The application has a main page on which two application bar buttons are set with the dark image version. During the Loaded event handler, the application checks what color is stored in the PhoneBackgroundBrush key within the Resources dictionary. Based on the returned value, the icons are taken from either the dark or the light relative path.

In the MainPage.xaml file, the application bar is defined with two buttons:

. . .
<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="False" Opacity="0">
            <shell:ApplicationBarIconButton x:Name="btnPlay"
            IconUri="/Images/dark/appbar.transport.play.rest.jpg" Text="Play"/>
            <shell:ApplicationBarIconButton x:Name="btnStop"
            IconUri="/Images/dark/appbar.stop.rest.jpg" Text="Stop"/>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
. . .

					  

In the MainPage.xaml.cs code file, the Loaded event handler is hooked so you can call the UpdateUI method, which is the core method of this recipe. The IsDarkTheme static property from the ThemeDetector class is checked to retrieve whether the current background theme is the Dark theme. If it is, the icons are picked from the dark directory; otherwise, the icons are picked from the Light directory.

private void UpdateUI()
        {
            if (ThemeDetector.IsDarkTheme)
            {
                btnPlay.IconUri = new Uri("/Images/dark/appbar.transport.play.rest.jpg",
                                          UriKind.Relative);
                btnStop.IconUri = new Uri("/Images/dark/appbar.stop.rest.jpg",
                                          UriKind.Relative);
                PageTitle.Text = "Dark Theme";
            }
            else
            {
                btnPlay.IconUri = new Uri("/Images/light/appbar.transport.play.rest.jpg",
                                          UriKind.Relative);
                btnStop.IconUri = new Uri("/Images/light/appbar.stop.rest.jpg",
                                          UriKind.Relative);
                PageTitle.Text = "Light Theme";
            }
        }

					  

The ThemeDetector class has only one property, which returns a Boolean value indicating when the Dark background theme is in use:

public class ThemeDetector
    {
        public static bool IsDarkTheme
        {
            get
            {
                SolidColorBrush backgroundBrush =
                Application.Current.Resources["PhoneBackgroundBrush"] as SolidColorBrush;
                if (backgroundBrush.Color == Color.FromArgb(255, 0, 0, 0)) // Black color
                    return true;
                else
                    return false;
            }

        }
    }

					  

5. Usage

From Visual Studio 2010, select the Windows Phone 7 Emulator as your target output and then press Ctrl+F5. The emulator starts, briefly displaying the application with the application bar shown in Figure 1. As you can see, the application uses the page title to inform the user about the background theme it has found in the operating system.

Figure 1. The application has detected the Dark theme.

Press the hardware Start button and then go to the application list by pressing the right arrow at the top-right corner of the screen. Select the Settings tile, tap the Theme list item, and change the Background value from Dark to Light.

Now the emulator has the white background color; go back to the application either by pressing the hardware Back button until you reach it or by running a new application instance. The application retrieves the current background theme as the Light theme and changes the icon accordingly (see Figure 2).

Figure 2. The application detects the new background and changes the icons and page title.